<template>
    <div>
        <tab :line-width="1" v-model="index">
            <tab-item selected>登录</tab-item>
            <tab-item>注册</tab-item>
            <tab-item >忘记密码</tab-item>
            <!-- <tab-item>重设密码</tab-item> -->
        </tab>
        <swiper v-model="index" :show-dots="false" height="500px">
            <swiper-item>
                <group title="">
                    <x-input @on-change="doCheckUser" required title="账号" v-model.trim="username" placeholder-align="right" placeholder="手机号/用户名/邮箱"></x-input>
                    <x-input v-show="!showCode" required title="密码" type="password" v-model.trim="password" placeholder-align="right" placeholder="短信验证码或密码" :min="6" :max="20"></x-input>
                    <x-input v-show="showCode" title="验证码" type="tel" ref="verCode1" :placeholder="showPlaceStr" v-model="verifycode" required placeholder-align="right" class="weui-vcode">
                        <x-button slot="right" :disabled="cding" type="primary" @click.native="getMobCode()" mini>{{cdbtnStr}}{{(smsCodeCD>0 && smsCodeCD
                            <60)?( "("+smsCodeCD+ ")"): '' }}</x-button>
                    </x-input>
                </group>
                <div style="padding:15px;">
                    <x-button type="primary" @click.native="dologin()">登录</x-button>
                </div>
                <span v-if="showCode" style="padding:15px;">注意:点击'获取'按钮后,只能通过验证码登录</span>
                <divider>其他方式登录</divider>
                <flexbox class="other_choose">
                  <flexbox-item v-if="wxBtnShow"><span @click="doWxlogin()"><img src="/static/z39h5/images/wx.png" alt=""></span></flexbox-item>
                  <flexbox-item v-if="qqBtnShow"><span @click="doQQlogin()"><img src="/static/z39h5/images/qq.png" alt=""></span></flexbox-item>
                  <flexbox-item v-if="wbBtnShow"><span @click="doWblogin()"><img src="/static/z39h5/images/wb.png" alt=""></span></flexbox-item>
                </flexbox>
                <!-- <div class="other_choose">
                    <span>
                        <img src="/static/z39h5/images/qq.png" alt="">
                    </span>
                    <span>
                        <img src="/static/z39h5/images/wx.png" alt="">
                    </span>
                    <span>
                        <img src="/static/z39h5/images/wb.png" alt="">
                    </span>
                </div> -->
            </swiper-item>
            <swiper-item>
                <group>
                    <x-input title="手机号" v-model.trim="mobile" placeholder-align="right" required is-type="china-mobile" placeholder="请输入绑定手机号"></x-input>
                    <x-input title="验证码" type="tel" ref="verCode2" placeholder="短信6位数字" v-model="verifycode" required placeholder-align="right" class="weui-vcode">
                        <x-button slot="right" :disabled="cding" type="primary" @click.native="getMobCode()" mini>{{cdbtnStr}}{{(smsCodeCD>0 && smsCodeCD
                            <60)?( "("+smsCodeCD+ ")"): '' }}</x-button>
                    </x-input>
                    <!-- <x-input required title="账号" v-model.trim="username" placeholder-align="right" placeholder="请输入用户名"></x-input>
                    <x-input required title="邮箱" v-model.trim="email" placeholder-align="right" is-type="email" placeholder="请输入常用邮箱"></x-input>
                    <x-input title="手机号" v-model.trim="mobile" placeholder-align="right" required is-type="china-mobile" placeholder="请输入绑定手机号"></x-input>
                    <x-input title="验证码" type="tel" ref="verCode2" placeholder="短信6位数字" v-model="verifycode" required placeholder-align="right" class="weui-vcode">
                        <x-button slot="right" :disabled="cding" type="primary" @click.native="getMobCode()" mini>{{cdbtnStr}}{{(smsCodeCD>0 && smsCodeCD
                            <60)?( "("+smsCodeCD+ ")"): '' }}</x-button>
                    </x-input>
                    <x-input required title="密码" v-model.trim="password" placeholder-align="right" type="password" placeholder="请输入6-20位密码" :min="6" :max="20"></x-input>
                    <x-input required title="确认密码" type="password" v-model.trim="password2" placeholder-align="right" placeholder="请再次输入密码" :min="6" :max="20"></x-input> -->
                </group>
                <Agreement style="padding-top: 10px;" :confirm.sync="confirm"></Agreement>
                <div style="padding:15px;">
                    <x-button type="primary" @click.native="doRegSimple()">注册</x-button>
                </div>
            </swiper-item>
            <swiper-item>
                <group>
                    <x-input title="手机号" v-model.trim="mobile" placeholder-align="right" required is-type="china-mobile" placeholder="请输入手机号"></x-input>
                    <x-input title="验证码" type="tel" ref="verCode3" placeholder="短信6位数字" v-model="verifycode" required placeholder-align="right" class="weui-vcode">
                        <x-button slot="right" :disabled="cding" type="primary" @click.native="getMobCode()" mini>{{cdbtnStr}}{{(smsCodeCD>0 && smsCodeCD
                            <60)?( "("+smsCodeCD+ ")"): '' }}</x-button>
                    </x-input>
                    <x-input required title="新密码" type="password" v-model.trim="password" placeholder-align="right" placeholder="请输入6-20位" :min="6" :max="20"></x-input>
                </group>
                <div style="padding:15px;">
                    <x-button type="primary" @click.native="doResetPsw()">确定</x-button>
                </div>
            </swiper-item>
        </swiper>
        <countdown slot="value" v-show="false" v-model="smsCodeCD" :start="cdStart" @on-finish="smsCodeDone"></countdown>
    </div>
</template>
<script>
import {
    Countdown,Divider,
    Toast,ButtonTab,ButtonTabItem,Tab,TabItem,XButton,
    Swiper,SwiperItem,XInput,Group,Cell,Flexbox,FlexboxItem
} from 'vux'
import {
    mapState,
    mapActions
} from 'vuex'

import api from '../api'
import { taskAndTag } from "./mixin";
import { help } from "./mixinApp";
import Agreement from './Agreement.vue'

let cdtime = 60;
export default {
    components: {
        Countdown, Agreement,Divider,
        Toast,ButtonTab,ButtonTabItem,Tab,TabItem,XButton,
        Swiper,SwiperItem,XInput,Group,Cell,Flexbox,FlexboxItem
    },
    props:{
        isWin: Boolean,
    },
    mixins: [taskAndTag,help],
    computed:{
        ...mapState({
            headimg: state => state.vux.headimg,
            isLogin: state => state.vux.isLogin,
            uid: state => state.vux.uid,
            openid: state => state.vux.openid,
            userinfo: state => state.vux.userinfo,
            isloginApp: state => state.vux.isloginApp,
        })
    },
    watch: {
        "userinfo":function(){
            console.log("watch isloginApp")
            this.dologinApp();
            console.log( "login.vue:",JSON.stringify(this.userinfo)  );
        }
    },
    created() {
        let first = firstLogin;
        if (first) {
            this.index = 1;
        }
        this.isWx = this.is_weixin();
        
        this.username = this.username || window.localStorage.getItem('username');
        // var isWx = this.is_weixin();
        // if (isWx|| isApp) {
        //     this.isWx = true;
        // }
        if(!isApp) return ; //下面app代码不需要执行.
        try{
            this.wxBtnShow = isInstalled("weixin");
            this.qqBtnShow = isInstalled("qq");
            // this.wbBtnShow = isInstalled("sinaweibo");  //还为开通这功能.
        }catch(e){
            console.log("appinstall test error",e)
        } //dcloud plus        
        console.log("login in:",this.isWin);
    },
    mounted: function() {
        if(this.openid) return ;
        let code = this.GetRequest()["code"];
        var defaultUrl= '//cdns.7dtime.com/heads/';  // 9.jpg
        if (code && this.headimg.indexOf(defaultUrl) ==-1) {
            this.getuser(code).then((data)=>{
                this.dologinAfter(true);
            })
        }
    },
    methods: {
        dologinAfter(val){
            if(!this.isWin){
                this.$router.back(-1); //this.go("m_mine");
            }else{
                this.$emit('toVisible',val) ;
            }
        },
        doWxlogin() {
            if( !this.isWx && !isApp ){
               return this.$vux.toast.show({
               text: `请APP或微信中使用`, position:'middle',width:"200px",type:"text"});
            }
            if( this.isWx ){
                api.authurl({
                    url:window.location.href
                }).then(data => {
                    if(data.errno !=0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});
                    data = data.data;
                    console.log(data);
                    window.location.href = data;
                })
            }
            if( isApp ){
                try{
                    loginApp("weixin");   //static/jslib/dcloud_auth.js
                }catch(e){console.log("app weixin login error")}
            }

            console.log("doWxlogin");
        },
        doWblogin(){
            if( !isApp ){
               return this.$vux.toast.show({
               text: `请APP中使用`, position:'middle',width:"200px",type:"text"});
            }
            return this.$vux.toast.show({
               text: `暂未开放`, type:"warn"});
            try{
                loginApp("sinaweibo");
            }catch(e){}
            console.log("doWblogin")
        },
        doQQlogin(){
            if( !isApp ){
               return this.$vux.toast.show({
               text: `请APP中使用`, position:'middle',width:"200px",type:"text"});
            }
            try{
                loginApp("qq");
            }catch(e){}
            console.log("doQQlogin")
        },
        dologinApp(){
            console.log("dologinApp",JSON.stringify(this.userinfo));
            api.loginApp(this.userinfo).then(data => {
                if(data.errno !=0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});
                data = data.data;
                console.log("loginApp:",JSON.stringify(data));
                if (data.token) {
                    window.localStorage.setItem('token', data.token);
                }
                this.$store.commit(Object.assign({ type: "user" }, data));
                this.$store.commit({ type: "z39/reset" });
                this.dologinAfter(true);
                this.usertask();
            })
        },
        doWxWarn(){

            console.log("doWxWarn");
        },
        dologin() {
            var filterReg = /[~'"!#$%^&*()-+=:]/ ;
            if(filterReg.test(this.username) ||filterReg.test(this.password)) return this.$vux.toast.show({text:"含非法字符",type: 'warn'});
            if(this.username.length == 0) return this.$vux.toast.show({text:"请输入账号",type: 'warn'});
            if(!this.showCode && (this.password.length < 6 || this.password.length>20)) return this.$vux.toast.show({text:"密码6-20位",type: 'warn'});
            window.localStorage.setItem('username', this.username);
            if( this.showCode && this.useSmsCode ){
                if(this.verifycode.length!=6) return this.$vux.toast.show({text: "输入6位数字" ,type: 'warn'});
                api.loginCode({
                    mobile: this.username,
                    verifycode: this.verifycode,
                    sms_type:1
                }).then(data => {
                    if(data.errno !=0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});
                    data = data.data;
                    this.doWithLogin(data);
                })
                return ;
            }
            api.login({
                username: this.username,
                password: this.password || this.verifycode
            }).then(data => {
                if(data.errno !=0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});

				data = data.data;
				this.doWithLogin(data);
            })
        },
        doWithLogin(data){
            if (data.token) {
                window.localStorage.setItem('token', data.token);
            }
            this.login(true);
            this.$store.commit(Object.assign({ type: "user" }, data));
            this.dologinAfter(true);
            this.$store.commit({ type: "z39/reset" });
            this.usertask();
			this.checkInvite();
        },
        doRegSimple() {
            if(!this.isMob(this.mobile)) return this.$vux.toast.show({text: "手机号错误",type: 'warn'}) ;
            if(this.verifycode.length==0)return this.$vux.toast.show({text:"缺少验证码",type: 'warn'});
            if( !this.confirm ) return this.$vux.toast.show({text: "需同意协议",type: 'warn'}) ;
            api.loginCode({
                mobile: this.mobile,
                verifycode: this.verifycode,
                sms_type:1
            }).then(data => {
                if(data.errno !=0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});
                data = data.data;
                this.doWithLogin(data);
            })
        },
        doReg() {
            // return console.log("show:",this.confirm) ;
            var filterReg = /[~'"!#$%^&*()-+=:]/ ;
            if(filterReg.test(this.username) ||filterReg.test(this.password)) return this.$vux.toast.show({text:"含非法字符",type: 'warn'});
            if (this.password != this.password2) {
                this.$vux.toast.show({
                    text: "两次密码不一致",
                    type: 'warn',
                    time: 15000
                })
                return;
            }
            if(this.username.length==0)return this.$vux.toast.show({text:"缺少用户名",type: 'warn'});
            if(!this.isEmail(this.email)) return this.$vux.toast.show({text: "邮箱错误",type: 'warn'}) ;
            if(this.mobile.length==0) return this.$vux.toast.show({text: "请输入手机",type: 'warn'}) ;
            if(!this.isMob(this.mobile)) return this.$vux.toast.show({text: "手机号错误",type: 'warn'}) ;
            if(this.verifycode.length==0)return this.$vux.toast.show({text:"缺少验证码",type: 'warn'});
            if(this.password.length<6||this.password.length>20)return this.$vux.toast.show({text:"密码长度错误",type: 'warn'});
            if( !this.confirm ) return this.$vux.toast.show({text: "需同意协议",type: 'warn'}) ;
            // console.log("doRegist: " + this.username + " " + this.password);
            api.reg({
                // 二次验证所需的三个值
                username: this.username,
                email: this.email,
                mobile: this.mobile,
                verifycode: this.verifycode,
                password: this.password,
                password2: this.password2,
                openid: this.openid,
                clause: "on",
                custom: 1,
                type: 1,
                p: "z39tlog"
            }).then(data => {
                if(data.errno !=0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});

				data = data.data;
				this.doWithLogin(data);
            })
        },
        getMobCode() {
            console.log("getMobCode");
            // this.smsCodeCD = cdtime;
            // this.cdStart = true;
            // this.cding = true;
            // return;
            let _this = this;
            if( this.index == 0){
                this.$refs.verCode1.focus();
            }else if(this.index == 1){
                this.$refs.verCode2.focus();
            }else{
                this.$refs.verCode3.focus();
            }
            if(this.mobile.length==0) return this.$vux.toast.show({text: "请输入手机",type: 'warn'}) ;
            if (!this.isMob(this.mobile)) {
                return this.$vux.toast.show({text: "手机号错误",type: 'warn'});
            }
            api.mobCode({
                mobile: this.mobile,
                type: 1
            }).then(data => {
				if(data == undefined) data={errmsg:"网络错误",errno:1001};
				if ( (data.hasOwnProperty("err_code") && data.err_code != "0") || (data.hasOwnProperty("errno") && data.errno != 0)) {
				  this.$vux.toast.show({text: data.msg|| data.errmsg,type: 'warn'})
				  return ;
				}
				this.$vux.toast.show({text: "获取成功",type: 'success',time: 1500})
                this.smsCodeCD = cdtime;
                this.useSmsCode = true ;
                this.showPlaceStr = "短信6位数字";
                this.cdStart = true;
                this.cding = true;
                console.log(data);
            });
        },
        doUpdate() {
            var filterReg = /[~'"!#$%^&*()-+=:]/ ;
            if(filterReg.test(this.password)) return this.$vux.toast.show({text:"含非法字符",type: 'warn'});
            if (this.password != this.password2) {
                return this.$vux.toast.show({text: "两次密码不一致",type: 'warn',time: 15000});
            }

            api.updatepwd({
                oldpassword: this.oldpassword,
                password: this.password,
                password2: this.password2
            }).then(data => {
                if(data.errno !=0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});

				this.$vux.toast.show({
					text: "修改成功",
					type: 'success'
				})
                console.log(data);
            });
        },
        doResetPsw(){
            if(this.mobile.length==0) return this.$vux.toast.show({text: "请输入手机",type: 'warn'}) ;
            if (!this.isMob(this.mobile)) return this.$vux.toast.show({text: "手机号错误",type: 'warn'});

            if (this.verifycode.length != 6) return this.$vux.toast.show({text: "验证码错误",type: 'warn'});
            if (this.password.length <6 || this.password.length>20) return this.$vux.toast.show({text: "密码长度错误",type: 'warn'});
            var filterReg = /[~'"!#$%^&*()-+=:]/ ;
            if(filterReg.test(this.password)) return this.$vux.toast.show({text:"含非法字符",type: 'warn'});

            api.updatePwdMob({
                mobile: this.mobile,
                verifycode: this.verifycode,
                password: this.password,
                sms_type: 1,
            }).then(data => {
                if(data.errno !=0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});

                data = data.data;
                this.doWithLogin(data);
            })
        },
        smsCodeDone() {
            this.cding = false;
            console.log(this.cdStart);
            this.cdStart = false;
        },
        doCheckUser(){
            if (this.isMob(this.username)) {
                this.mobile = this.username ;
                this.showCode = true ;
                api.checkUser({mobile:this.username}).then(data=>{
                    if(data.errno != 0) this.showCode = true ;
                    console.log(data) ;
                })
            }else{
                this.showCode = false ;
            }
        },
        ...mapActions([
            'user', 'login'
        ])
    },
    data() {
        return {
            index: 0,
            pwdIndex: 0,
            showMenus: false,
            username: "",
            email: "",
            password: "",
            password2: "",
            loginShow: false,
            mobile: this.mobile,
            verifycode: this.verifycode,
            cdStart: false,
            cding: false,
            cdbtnStr: "获取",
            smsCodeCD: cdtime , //60
            showCode : false ,
            useSmsCode:false,   //使用验证码登录,已经获取了验证码
            showPlaceStr:"短信验证码或密码",
            isWx: false ,
            confirm:false,
            loginExtShow:false, //第三方登录是否显示
            wxBtnShow:false,
            qqBtnShow:false,
            wbBtnShow:false,
        }
    }
}
</script>
<style lang="less">
.vux-divider{
  margin-bottom: 20px;
}
.vux-flexbox .vux-flexbox-item{
  display: flex;
  justify-content: center;
}
.protocol input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: -9999px;
    visibility: hidden;
}

.pwd_tab {
    padding-left: 20%;
    padding-top: 10px;
    padding-right: 20%;
}
.other_choose span {
    display: block;
    float: left;
    border: 2px solid #10aeff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    text-align: center;
}
.other_choose span img {
    width: 60%;
    padding: 14% 0;
}
</style>
